<script setup>
import { useLoginStore } from '@/stores/login';
import request from '@/utils/request'
import { ElMessage } from 'element-plus';
const props = defineProps(['files'])
const emit = defineEmits(['update:files'])
const deleteFile =(url)=> {
  return request({
    url: '/common/upload',
    method: 'delete',
    data: { url: url }
  })
}
const upload =async (res)=>{
  let files = props.files
  files.push(res.data)
  emit('update:files', files)
}
const removeFile = (file, fileList) => {
  // let files = fileList
  // let idx = fileList.indexOf(file)
  // console.log(files[idx])
  // deleteFile(files[idx].url)
  emit('update:files', fileList)
}
const loginStore=useLoginStore()
const headers = {
  token: loginStore.token
}
const exceed = ()=>{
  ElMessage.error('文件数量超过限制')
}

</script>
<template>
  <el-upload style="width: 32.5rem;" drag action="/api/common/upload" 
    :on-success="upload" :headers="headers" :limit="5" :on-exceed="exceed"
     :on-remove="removeFile" :file-list="props.files" multiple>
    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
    <div class="el-upload__text">
      将文件拖到此处 <em>或点击上传</em>
    </div>
    <template #tip>
      <div class="el-upload__tip">
        文件不能超过10mb
      </div>
    </template>
  </el-upload>
</template>


<style scoped>
</style>